<template>
	<view>
		<view class="imgBox">
			<image :src="imgApi+'/files/vegetable_mall_file/default/groupBanner.jpg'"></image>

		</view>
		<view class="cardList">
			<view class="cardBox">
				<view class="avatarBox">
					<image
						:src="imgApi+'/files/vegetable_mall_file/groupGoodsM/7524275519097093/97c1fffa06695c48f1d7464313d67dc0.jpeg'"
						mode="scaleToFill">
					</image>
				</view>
				<view class="content">
					<view class="title">
						<view class="overflow"><text>多汁超甜枇杷果多汁超甜枇杷果多汁超甜枇杷果</text></view>
						<view class="cashBack">
							<image :src="imgApi+'/files/vegetable_mall_file/default/cashBack.png'"></image>
							<text>69元</text>
						</view>
					</view>
					<view class="overview">
						<text>还差5件即可优惠5元</text>
						<u-button text="月落"></u-button>
					</view>
					<view class="progress">
						<u-line-progress :percentage="76" activeColor="#fb5b5c" inactiveColor="#fdd4d1">
						</u-line-progress>
						<text class="count">已拼500件</text>
					</view>
					<view class="groupUser">
						<u--image :showLoading="true"
							:src="'https://thirdwx.qlogo.cn/mmopen/vi_32/z4hFFGreQKdhu7pTnvab7viaVibDiahkhHprfgmZcib5MQ1ibRYNgYexQkAC7ZUREQxhMMk46mGCLHbSx3yS4Ub5axQ/132'"
							shape="circle" width="40rpx" height="40rpx"></u--image>
						<u--image :showLoading="true"
							:src="'https://thirdwx.qlogo.cn/mmopen/vi_32/z4hFFGreQKdhu7pTnvab7viaVibDiahkhHprfgmZcib5MQ1ibRYNgYexQkAC7ZUREQxhMMk46mGCLHbSx3yS4Ub5axQ/132'"
							shape="circle" width="40rpx" height="40rpx"></u--image>
						<u--image :showLoading="true"
							:src="'https://thirdwx.qlogo.cn/mmopen/vi_32/z4hFFGreQKdhu7pTnvab7viaVibDiahkhHprfgmZcib5MQ1ibRYNgYexQkAC7ZUREQxhMMk46mGCLHbSx3yS4Ub5axQ/132'"
							shape="circle" width="40rpx" height="40rpx"></u--image>
						<text class="count" style="font-size: 25rpx;">等人正在拼团</text>
					</view>
					<view class="buyPrice">
						<view>
							<text>拼团价</text>
							<text>￥79.9</text>
						</view>
						<view>
							<text>去拼单 ></text>
						</view>
					</view>
				</view>
			</view>
			<view class="cardBox">
				<view class="avatarBox">
					<image
						:src="imgApi+'/files/vegetable_mall_file/groupGoodsM/7498525128843033/c603d669cc27c8faacec181c640fb77d.jpeg'"
						mode="scaleToFill">
					</image>
				</view>

				<view class="content">
					<view class="title">
						<view class="overflow"><text>多汁超甜枇杷果多汁超甜枇杷果多汁超甜枇杷果</text></view>
						<view class="cashBack">
							<image :src="imgApi+'/files/vegetable_mall_file/default/cashBack.png'"></image>
							<text>69元</text>
						</view>
					</view>
					<view class="overview">
						<text>还差5件即可优惠5元</text>
					</view>
					<view class="progress">
						<u-line-progress :percentage="76" activeColor="#fb5b5c" inactiveColor="#fdd4d1">
						</u-line-progress>
						<text class="count">已拼500件</text>
					</view>
					<view class="groupUser">
						<u--image :showLoading="true"
							:src="'https://thirdwx.qlogo.cn/mmopen/vi_32/z4hFFGreQKdhu7pTnvab7viaVibDiahkhHprfgmZcib5MQ1ibRYNgYexQkAC7ZUREQxhMMk46mGCLHbSx3yS4Ub5axQ/132'"
							shape="circle" width="40rpx" height="40rpx"></u--image>
						<u--image :showLoading="true"
							:src="'https://thirdwx.qlogo.cn/mmopen/vi_32/z4hFFGreQKdhu7pTnvab7viaVibDiahkhHprfgmZcib5MQ1ibRYNgYexQkAC7ZUREQxhMMk46mGCLHbSx3yS4Ub5axQ/132'"
							shape="circle" width="40rpx" height="40rpx"></u--image>
						<u--image :showLoading="true"
							:src="'https://thirdwx.qlogo.cn/mmopen/vi_32/z4hFFGreQKdhu7pTnvab7viaVibDiahkhHprfgmZcib5MQ1ibRYNgYexQkAC7ZUREQxhMMk46mGCLHbSx3yS4Ub5axQ/132'"
							shape="circle" width="40rpx" height="40rpx"></u--image>
						<text class="count" style="font-size: 25rpx;">等人正在拼团</text>
					</view>
					<view class="buyPrice">
						<view>
							<text>拼团价</text>
							<text>￥79.9</text>
						</view>
						<view>
							<text>去拼单 ></text>
						</view>
					</view>
				</view>
			</view>
			<view class="cardBox">
				<view class="avatarBox">
					<image
						:src="imgApi+'/files/vegetable_mall_file/groupGoodsM/7498525128843033/c603d669cc27c8faacec181c640fb77d.jpeg'"
						mode="scaleToFill">
					</image>
				</view>

				<view class="content">
					<view class="title">
						<view class="overflow"><text>多汁超甜枇杷果多汁超甜枇杷果多汁超甜枇杷果</text></view>
						<view class="cashBack">
							<image :src="imgApi+'/files/vegetable_mall_file/default/cashBack.png'"></image>
							<text>69元</text>
						</view>

					</view>
					<view class="overview">
						<text>还差5件即可返现5元</text>
					</view>
					<view class="progress">
						<u-line-progress :percentage="76" activeColor="#fb5b5c" inactiveColor="#fdd4d1">
						</u-line-progress>
						<text class="count">已拼500件</text>
					</view>
					<view class="groupUser">
						<u--image :showLoading="true"
							:src="'https://thirdwx.qlogo.cn/mmopen/vi_32/z4hFFGreQKdhu7pTnvab7viaVibDiahkhHprfgmZcib5MQ1ibRYNgYexQkAC7ZUREQxhMMk46mGCLHbSx3yS4Ub5axQ/132'"
							shape="circle" width="40rpx" height="40rpx"></u--image>
						<u--image :showLoading="true"
							:src="'https://thirdwx.qlogo.cn/mmopen/vi_32/z4hFFGreQKdhu7pTnvab7viaVibDiahkhHprfgmZcib5MQ1ibRYNgYexQkAC7ZUREQxhMMk46mGCLHbSx3yS4Ub5axQ/132'"
							shape="circle" width="40rpx" height="40rpx"></u--image>
						<u--image :showLoading="true"
							:src="'https://thirdwx.qlogo.cn/mmopen/vi_32/z4hFFGreQKdhu7pTnvab7viaVibDiahkhHprfgmZcib5MQ1ibRYNgYexQkAC7ZUREQxhMMk46mGCLHbSx3yS4Ub5axQ/132'"
							shape="circle" width="40rpx" height="40rpx"></u--image>
						<text class="count" style="font-size: 25rpx;">等人正在拼团</text>
					</view>
					<view class="buyPrice">
						<view>
							<text>拼团价</text>
							<text>￥79.9</text>
						</view>
						<view>
							<text>去拼单 ></text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgApi: this.$reqConfig.URLIMAGE
			}
		},
		methods: {

		},
	}
</script>

<style lang="scss">
	.imgBox {
		width: 750rpx;
		height: 500rpx;
		position: absolute;
		overflow: hidden;
		border-radius: 0 0 140rpx 140rpx;

		image {
			z-index: -1;
			width: 100%;
			height: 600rpx;

		}
	}

	.cardList {
		position: absolute;
		margin: 400rpx 0rpx 10rpx 45rpx;

		.cardBox {
			display: flex;
			margin: 30rpx 0rpx;
			box-shadow: 0rpx 2rpx 10rpx #dfdfdf;
			border-radius: 20rpx;
			background-color: #FFF;
			width: 675rpx;
			height: 285rpx;
			padding: 15rpx 0rpx 15rpx 30rpx;
			box-sizing: border-box;
			position: relative;

			.avatarBox {
				width: 240rpx;
				margin-top: 17rpx;

				image {
					border-radius: 20rpx;
					height: 220rpx;
					width: 220rpx;
					// margin-left: 0rpx;
				}
			}

			.count {
				margin-left: 15rpx;
				font-size: 20rpx;
				color: #b6b6b6;
			}

			.content {
				.buyPrice {
					display: flex;
					justify-content: space-between;

					view:nth-child(1) {
						text:nth-child(1) {
							font-size: 20rpx;
						}
					}

					view:nth-child(2) {
						text {
							font-size: 30rpx;
						}
					}

					text {

						font-size: 35rpx;
						font-weight: 600;
						color: #fb5b5d;
					}
				}

				.groupUser {
					margin: 14rpx 0rpx;
					display: flex;
				}

				.progress {
					margin: 5rpx 0rpx;
					display: flex;
					width: 380rpx;


				}

				.title {
					margin: 8rpx 0rpx;
					font-weight: 600;
					display: flex;

					.overflow {
						width: 280rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}



					.cashBack {
						margin-right: 20rpx;
						top: -62rpx;
						right: -116rpx;
						position: absolute;

						image {
							width: 150rpx;
							height: 140rpx;
						}

						text {
							
							// color: ;
							color: #fffff;
						}
					}


				}

				.overview {
					margin: 8rpx 0rpx;
					letter-spacing: 1rpx;
					font-size: 23rpx;

				}
			}
		}
	}
</style>
